<template>
  <div>
    <div
      style="
        position: fixed;
        top: 10px;
        height: 75%;
        word-wrap: break-word;
        overflow-y: auto;
        tex-align:left;
        font-size:20px;
      "
    >
      <span
        v-for="(item, index) in typing"
        :key="index"
        style="font-size: 40rpx; text-decoration: underline"
        :class="item.color ? '' : 'red'"
        >{{ item.char }}<text v-if="item.char == ' '">&ensp;</text></span
      >
      <div id="msg_end" style="height:0px; overflow:hidden"></div>
    </div>

    <div
      style="
        position: fixed;
        bottom: 20px;
        height: 20%;
        margin-top: 40rpx;
        text-align: left;
      "
    >
      <div class="big">选手:{{ user }}</div>
      <div class="big">速度:{{ speed }}KPM</div>
      <div class="big">正确率:{{ ratio }}%</div>
    </div>
  </div>
</template>
<script>
export default {
  name: "detail",
  data() {
    return {
      typing: [],
      speed: 0,
      ratio: 0,
      user: "",
      last: "",
      article:''
    };
  },
  created() {
    console.log(this.$route.params);
    this.user = this.$route.params.user;
  },
  async mounted(){
    let that = this
    let res = "";
    res = await this.$cloudbase
        .auth({ persistence: "local" })
        .anonymousAuthProvider()
        .signIn();
      console.log(res);

    this.article = await this.$cloudbase.database().collection('article').where({}).limit(1).get()
    this.article = this.article.data[0].str
    this.watcher =this.$cloudbase
        .database()
        .collection('typing').where({
      name: this.user
    }).watch({
      onChange(snapshot) {
        // console.log(snapshot)
        let arr = that.article.split('')
        let arr1 = snapshot.docs[0].str.split('')
        that.speed = snapshot.docs[0].speed
        that.ratio = snapshot.docs[0].ratio
        that.typing = []
        arr.forEach((v, i) => {
          that.typing.push({
            char: arr1[i],
            color: v == arr1[i]
          })
        })
        that.last='s'+(that.typing.length-1)
        document.getElementById("msg_end").scrollIntoView()
      },
      onError(err) {
        console.error('the watch closed because of error', err)
      }
    })
  }
};
</script>
<style scoped>
.red {
  background-color: red;
  color:green;
  font-size:20px;
}
.big {
  font-size: 20px;
}
</style>